.box1-content{
  display: flex;
  width: 96%;
  height: 100%;
  margin-left: 2%;
  justify-content: space-between;
}
.data-content{
  height: 94%;
}
.data{
  width: 100%;
  height: 100%;
  border-bottom: none;
}
.data-border{
  padding: 24px 15px 14px;
  width: calc(100% - 30px);
  height: calc(100% - 38px);
  overflow: hidden;
}
.EventsTitle{
  display: flex;
}
.EventsTitle h1{
  width: 80px;
  height: 20px;
  font-size: 18px;
  font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  line-height: 20px;
  padding-right: 2vw;
}
.EventsTitle div{
  display: flex;
  width: 48px;
  height: 18px;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid rgba(255,255,255,0.8);
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  line-height: 18px;
  justify-content: center;
}
.Events> p{
  width: 250px;
  height: 18px;
  font-size: 12px;
  font-weight: 400;
  color: #23C7FF;
  line-height: 18px;
  padding-top: 0.7vh;
}
.eventsList{
  margin-top: 20px;
  display: flex;

}
.eventsList li{
  padding: 0vw 0.5vw;
  display: flex;
}

.eventsList li div:first-child{
  width: 56px;
  height: 56px;
  background: linear-gradient(225deg, rgba(255,255,255,0) 64%, rgba(197,240,255,0.08) 100%);
  opacity: 1;
  border: 2px solid #1FC6FF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eventsList li div i{
  width: 24px;
  height: 24px;
  display: block;
}
.eventsList li div:first-child i{
  background: url("/static/img/secure 1.svg");
}
.eventsList li:nth-child(2) div:first-child i{
  background: url("/static/img/HazardInformation-01 1.svg");
}
.eventsList li:nth-child(3) div:first-child i{
  background: url("/static/img/Frame 427319246.svg");
}
.Emergent .emergentList.eventsList li div i{
  background-image: url("/static/img/Frame 427319247.svg");
}
.Emergent .emergentList.eventsList li:nth-child(2) div i{
  background-image: url("/static/img/EmergencyEvacuation 1.svg");
}
.Emergent .emergentList.eventsList li:nth-child(3) div i{
  background-image: url("/static/img/outage 1.svg");
}
.Emergent .emergentList.eventsList li:nth-child(4) div i{
  background-image: url("/static/img/WarningLight 1.svg");
}
.eventText{
  padding-left: 0.5vw;
}
.eventText h2{
  width: 56px;
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  line-height: 20px;
}
.eventText p{
  width: 43px;
  height: 30px;
  font-size: 24px;
  font-weight: 500;
  color: #23C7FF;
  line-height: 30px;
  padding-top: 1vh;
}
.eventsList li:nth-child(2) .eventText p{
  color: #01FFFF;
}
.eventsList li:nth-child(3) .eventText p{
  color: #FF386B;
}
.eventText p b{
  font-size: 12px;
}
.eventDetailsList{
  display: flex;
  list-style: unset;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  line-height: 20px;
}
.eventDetailsList li{
  width:  7vw;
  margin-left: 1vw;
  padding-top: 0.5vh;
}
.eventDetailsList b{
  padding-left: 0.5vw;
}
.separate{
  display: block;
  height: 4px;
  background: linear-gradient(90deg, rgba(31,198,255,0.6) 0%, rgba(31,198,255,0) 100%);
  margin: 2vh 0;
}
.Emergent h1{
  font-size: 18px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  line-height: 20px;

}
.emergentList{
  display: flex;
  flex-wrap: wrap;
}
.emergentList li{
  /*margin-right: 3.3vw;*/
  margin: 0.3vh 3.3vw 0 0;
}
.emergentList li div:first-child{
  width: 48px;
  height: 48px;
  background: linear-gradient(225deg, rgba(255,255,255,0) 64%, rgba(197,240,255,0.08) 100%);
  border: 2px solid #1FC6FF;
}
.emergentList li p{
  font-size: 20px;
  font-weight: 500;
  color: #23C7FF;
  line-height: 30px;
}
.DeviceStatus-box{
  display: flex;
}
.DeviceStatus-picture{
  width: 100px;
  height: 100px;
  margin: 1vw 1vw 0 0.5vw;
}
.deviceStatusList li {
  height: 20px;
  width: 267px;
}
.deviceStatusList li>div {
  width: 100%;
  height: 100%;
  display: flex;
}
.deviceStatusList li:first-child {
  margin-top: 2.3vh;
}
.deviceStatusList li:nth-child(2){
  margin: 1.8vh 0;
}
.deviceStatusList li i{
  width: 4px;
  height: 20px;
  background: #306FFF;
  display: block;
}
.deviceStatusList li:nth-child(2) i{
  background: #EDA915;
}
.deviceStatusList li:nth-child(3) i{
  background: #FF386B;
}
.deviceStatusList li div{
display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.deviceStatusList li p{
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  line-height: 20px;
}
.deviceStatusList li:first-child p b{
  color: #23C7FF;
}
.deviceStatusList li:nth-child(2) p b{
  color: #EDA915;
}
.deviceStatusList li:last-child p b{
  color: #FF386B;
}
.deviceStatusList li span{
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  line-height: 20px;
}
.deviceStatusList li span b{
  color: rgba(255,255,255,0.6);
  font-size: 8px;
}
.deviceStatusList li h2{
  margin-top: 0.2vh;
  display: block;
  width: 100%;
  height: 1px;
  border-top: 1px dashed rgba(255,255,255,0.4);
}
.SecurityEquipment-picture{
  margin-top: 1vh;
  width: 100%;
  height: 150px;
}
.DeviceClass{
  width: 100%;
  height: 220px;
}
.deviceClass-picture{
  width: 100%;
  height: 100%;
}
.FORM02{
  width: 100%;
  height: 280px;
  overflow: hidden;
}
.FORM02 h1{
  width: 200px;
  height: 20px;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  line-height: 16px;
  margin-bottom: 10px;
}
.FORM02-row{
  width: 104%;
  height: 282px;
  overflow: auto;
}
.alarmProcessing{
  width: 100%;
  height: 250px;
  overflow: hidden;
}
.alarmProcessingList{
  width: 104%;
  height: 225px;
  overflow: auto;
}
.alarmProcessing h1{
  width: 200px;
  height: 20px;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  line-height: 16px;
  margin-bottom: 10px;
}
.alarmProcessingList li{
  width: 99%;
  height: 146px;
  border:1px solid #FF386B;
  margin-bottom: 1vh;
}
.alarmProcessingList li > div{
  width: calc(100% - 2vw);
  height: calc(100% - 2vh);
  margin: 1vh 1vw;
}
.alarmProcessingName{
  display: flex;
  justify-content: space-between;
}

.alarmProcessingName i{
  display: block;
  width: 24px;
  height: 24px;
  background: url("/static/img/alarm 1.svg");
}
.alarmProcessingList li p{
  width: 100%;
  height: 18px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  line-height: 18px;
  padding: 0.3vh 0;
}
.alarmProcessingList li p b{
  padding-left: 0.5vw;
  font-size: 12px;
  font-weight: 500;
  color: #FF386B;
  line-height: 20px;
}
.alarmProcessingList li p span{
  font-size: 12px;
  font-weight: bold;
  color: rgba(255,255,255,0.8);
  line-height: 20px;
}
.alarmProcessingList li .alarmProcessingName p{
  display: flex;
  justify-content: center;
  width: 140px;
  height: 20px;
  background: rgba(255,56,107,0.3);
}
.alarmProcessingList li:nth-child(2){
  border: 1px solid #1FC6FF;
}
.alarmProcessingList li:nth-child(2) .alarmProcessingName i{
  background-image: none;
}

.alarmProcessingList li:nth-child(2) .alarmProcessingName p{
  background: rgba(31,198,255,0.3);
}


.monitor{
  width: 44vw;
  height: 250px;
  position: absolute;
  bottom: 3vh;
  left: 28vw;
}
.monitorBorder{
  width: 90%;
  height: 75%;
  position: absolute;
  left: 5%;
  top: 20%;
}
.monitorList{
  width: 100%;
  height: 100%;
  display: flex;
}
.monitorList li{
  width: 30%;
  height: 100%;

}
.monitorList li:nth-child(1){
  background: url("/static/img/Snipaste_2023-06-01_09-41-05.png") no-repeat center;
}
.monitorList li:nth-child(2){
  margin: 0 5%;
  background: url("/static/img/Snipaste_2023-06-01_09-40-17.png") no-repeat center;
}
.monitorList li:nth-child(3){
  background: url("/static/img/Snipaste_2023-06-01_09-40-49.png") no-repeat center;
}


